import React from 'react';
import './../static/css/login.css';
import Top from './../module/header/top.js';
import CheckWanning from './../module/common/errorMessage.js'
import {set} from './../store';
import {registry} from './../api';

export default class Register extends React.Component {
  constructor(props) {
	super(props);
		this.state = {
			username: "",
			password: "",
			repassword:"",
			rememberMe: 0,
			nameError:'',
			passwordError:'',
			loginError:'',
			repasswordError:'',
			allow: true
		}
		this.handleChange = this.handleChange.bind(this);
		this.handleSubmit = this.handleSubmit.bind(this);
		this.userCheck = this.userCheck.bind(this);
		this.passwordCheck = this.passwordCheck.bind(this);
		this.repasswordCheck = this.repasswordCheck.bind(this);
	}

	handleChange(event) {
		const target = event.target;
		const name = target.name;
		this.setState({[name]: target.value});
	}

	userCheck(event) {
		const minUsernameLength = 5;
		if(this.state.username.length < minUsernameLength) {
			this.setState({
				nameError:'用户名太短，请输入6-12个字符',
				allow: false
			});
		} else {
			this.setState({
				nameError:'',
				allow: true
			})
		}
	}

	passwordCheck(event) {
		const minUsernameLength = 0;

		if(this.state.password.length < minUsernameLength) {
			
			this.setState({
				passwordError:'this password is too short'
			});
		} else {
			this.setState({
				passwordError:''
			});
		}
	}

	repasswordCheck(event) {
		let pwd_f = this.state.password;
		let pwd_r = this.state.repassword;
		console.info(pwd_f+" "+pwd_r);
		if(pwd_f==pwd_r) {
			this.setState({
			  repasswordError: '',
			  allow: true
			});
		} else {
			this.setState({
			  repasswordError: '密码确认错误',
			  allow: false
			});
		}
	}

	handleSubmit(event) {
		if(this.state.allow) {
			registry({
				name: this.state.username,
				password: this.state.password,
			}).then(resp=>{
				console.info(resp);
				if(resp.status==-1) {

				} else if(resp.status==200){
					this.props.history.push("/login");
				}
			})
		}
	}

    render() {
	    return (
	      <div className="bg container_bg">
		      <div className="container ">

		      		<div className="form row">
		      			<div className="pre-header"></div>
		      			<div className="form-title">码客山威——注册</div>
		      			<div className="form-horizontal col-md-offset-3" id="login_form">
			               
			                <div className="col-md-9">
			                
				                    <div className="form-group">   
				                        	<input className="form-control required" onBlur={this.userCheck} onChange={this.handleChange}  value={this.state.username} type="text" placeholder="请输入用户名" id="username" name="username" maxLength="20"/>
				                        	<CheckWanning message={this.state.nameError} />       
				                    </div>
				                    <div className="form-group">
					                        <input className="form-control required" onBlur={this.passwordCheck} onChange={this.handleChange} value={this.state.password} type="password" placeholder="请输入密码" id="password" name="password" minLength="3" maxLength="12"/>
					                    	<CheckWanning message={this.state.passwordError} /> 
				                    </div>
				                    <div className="form-group">
					                        <input className="form-control required" onBlur={this.repasswordCheck} onChange={this.handleChange} value={this.state.repassword} type="password" placeholder="请确认密码" id="password_q" name="repassword" minLength="3" maxLength="12"/>
					                    	<CheckWanning message={this.state.repasswordError} /> 
				                    </div>
				                    
			                </div>
		           		</div>
		           		<div className="next-btn" style={{marginBottom:'10px'}}>
	                    	<button type="button" onClick={this.handleSubmit} className="btn btn-success btn-wild" name="submit" >注册</button>
	                    </div>
	                    <div className="next-dish" style={{marginBottom:'45px'}}>	
		                	<div className="login_push"><a href="login">用户登录</a></div>
		                	<div className="clear"></div>
		                </div>
		      		</div>
		      </div>
	      </div>
	    );
    }
}